.m-icon-default {
  overflow: hidden;
  display: inline-block;
  z-index: 0;
  margin-right: 6px; }

.m-icon-default .m-icon-child-svg, .m-icon-default .m-icon-child-svg *, .m-icon-default .m-icon-child-image * {
  width: 100%;
  height: 100%;
  background-size: cover; }

.m-icon-default .m-icon-child-image {
  width: 100%;
  height: 100%;
  background-size: cover; }

.m-icon-size-large {
  width: 33px;
  height: 33px; }

.m-icon-size-small {
  width: 20px;
  height: 20px; }

.m-icon-size-normal {
  width: 25px;
  height: 25px; }

.m-icon-size-tiny {
  width: 15px;
  height: 15px; }

.m-icon-shape-circle {
  border-radius: 10000px; }

.m-icon-shape-fillet {
  border-radius: 5px; }

.m-icon-effect-hover-down:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 4px);
  -ms-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  -moz-transform: translate(0, 4px);
  transform: translate(0, 4px); }

.m-icon-effect-hover-up:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, -4px);
  -ms-transform: translate(0, -4px);
  -o-transform: translate(0, -4px);
  -moz-transform: translate(0, -4px);
  transform: translate(0, -4px); }

.m-icon-effect-hover-left:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(-4px, 0);
  -ms-transform: translate(-4px, 0);
  -o-transform: translate(-4px, 0);
  -moz-transform: translate(-4px, 0);
  transform: translate(-4px, 0); }

.m-icon-effect-hover-right:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(4px, 0);
  -ms-transform: translate(4px, 0);
  -o-transform: translate(4px, 0);
  -moz-transform: translate(4px, 0);
  transform: translate(4px, 0); }

.m-icon-effect-hover-scale:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  -moz-transform: scale(0.7);
  transform: scale(0.7); }

.m-icon-effect-click-down:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0); }

.m-icon-effect-click-down:active {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 4px);
  -ms-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  -moz-transform: translate(0, 4px);
  transform: translate(0, 4px); }

.m-icon-effect-click-up:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0); }

.m-icon-effect-click-up:active {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, -4px);
  -ms-transform: translate(0, -4px);
  -o-transform: translate(0, -4px);
  -moz-transform: translate(0, -4px);
  transform: translate(0, -4px); }

.m-icon-effect-click-left:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0); }

.m-icon-effect-click-left:active {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(-4px, 0);
  -ms-transform: translate(-4px, 0);
  -o-transform: translate(-4px, 0);
  -moz-transform: translate(-4px, 0);
  transform: translate(-4px, 0); }

.m-icon-effect-click-right:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0); }

.m-icon-effect-click-right:active {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: translate(4px, 0);
  -ms-transform: translate(4px, 0);
  -o-transform: translate(4px, 0);
  -moz-transform: translate(4px, 0);
  transform: translate(4px, 0); }

.m-icon-effect-click-scale:hover {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1); }

.m-icon-effect-click-scale:active {
  -webkit-transition: transform 200ms ease-out;
  -ms-transition: transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  -moz-transform: scale(0.7);
  transform: scale(0.7); }

.m-icon-shape-circle {
  border-radius: 200px; }

.m-icon-shape-fillet {
  border-radius: 15px; }
